<template>
  <div class="cooperative-media">
    <div
      class="page-header"
      :style="bannerImage ? { backgroundImage: `url(${bannerImage})` } : {}"
      :class="{ 'has-bg': !!bannerImage }"
    >
      <div class="container">
        <h1 class="page-title">合作媒体</h1>
        <p class="page-subtitle">与展会合作的权威媒体伙伴</p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('exhibition-news')"
            :class="['nav-item', { active: activeTab === 'exhibition-news' }]"
          >
            展会资讯
          </a>
          <a
            @click="setActiveTab('media-reports')"
            :class="['nav-item', { active: activeTab === 'media-reports' }]"
          >
            媒体报道
          </a>
          <a
            @click="setActiveTab('industry-news')"
            :class="['nav-item', { active: activeTab === 'industry-news' }]"
          >
            行业资讯
          </a>
          <a
            @click="setActiveTab('on-site-highlights')"
            :class="[
              'nav-item',
              { active: activeTab === 'on-site-highlights' },
            ]"
          >
            现场集锦
          </a>
          <a
            @click="setActiveTab('cooperative-media')"
            :class="['nav-item', { active: activeTab === 'cooperative-media' }]"
          >
            合作媒体
          </a>
          <a
            @click="setActiveTab('media-registration')"
            :class="[
              'nav-item',
              { active: activeTab === 'media-registration' },
            ]"
          >
            媒体注册
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <section class="content-section">
        <!-- <h2 class="section-title">合作媒体</h2>
        <p v-if="pageData.description" class="section-desc">
          {{ pageData.description }}
        </p> -->

        <div
          v-for="(item, index) in cooperativeMedia"
          :key="index"
          :style="{ marginBottom: index === 0 ? '30px' : '' }"
        >
          <div
            style="
              color: var(--e-global-color-selected);
              font-size: 24px;
              font-weight: bold;
            "
          >
            {{ index === 0 ? "大众媒体" : "行业媒体" }}
            <span style="font-size: 16px">（部分媒体，排名不分先后）</span>
          </div>
          <!-- 合作媒体Logo展示 -->
          <div class="cooperative-media-grid">
            <div
              class="media-logo-item"
              v-for="media in item"
              :key="media.id"
              @click="goDetail(media)"
            >
              <div class="media-logo-container">
                <img :src="media.logo" :alt="media.name" class="media-logo" />
                <p class="media-name">{{ media.name }}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { subpageApi } from "@/api/user";
import { ElMessage } from "element-plus";

export default {
  name: "CooperativeMedia",
  setup() {
    const router = useRouter();
    const activeTab = ref("cooperative-media");
    // 页面基本信息
    const pageData = ref({});

    // 合作媒体数据
    const cooperativeMedia = ref([[], []]);
    const bannerImage = ref("");

    // 加载合作媒体数据
    const loadCooperativeMedia = async () => {
      try {
        // 1) 优先加载多条数据列表
        const listRes = await subpageApi.getSubpageList(
          "media",
          "cooperative-media"
        );
        if (
          listRes &&
          listRes.code === "200" &&
          Array.isArray(listRes.data) &&
          listRes.data.length > 0
        ) {
          console.log("合作媒体多条数据:", listRes.data);

          listRes.data.forEach((item, index) => {
            let parsed = {};
            try {
              parsed = item.content
                ? typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content
                : {};
            } catch (e) {
              console.log("解析content失败:", e);
            }
            if (parsed.description === "大众媒体") {
              cooperativeMedia.value[0].push({
                id: item.id || index + 1,
                name: item.title || `合作媒体${index + 1}`, // 只取媒体名称
                logo: item.imageUrl || "", // 只取logo
                linkUrl: item.linkUrl || "", // 只取链接
              });
            } else {
              cooperativeMedia.value[1].push({
                id: item.id || index + 1,
                name: item.title || `合作媒体${index + 1}`, // 只取媒体名称
                logo: item.imageUrl || "", // 只取logo
                linkUrl: item.linkUrl || "", // 只取链接
              });
            }
          });

          console.log("cooperativeMedia:", cooperativeMedia.value);

          // 设置页面基本信息
          pageData.value = {
            title: "合作媒体",
            description: "与展会合作的权威媒体伙伴",
          };
          return;
        }

        // // 2) 回退到单条数据
        // const response = await subpageApi.getSubpageByKey(
        //   "media",
        //   "cooperative-media"
        // );
        // if (response && response.code === "200" && response.data) {
        //   console.log("合作媒体单条数据:", response.data);

        //   pageData.value = {
        //     title: response.data.title || "合作媒体",
        //     description: response.data.description || "",
        //   };

        //   if (response.data.content) {
        //     // 检查是否是富文本内容
        //     if (
        //       response.data.content.includes("<") &&
        //       response.data.content.includes(">")
        //     ) {
        //       richContent.value = response.data.content;
        //       cooperativeMedia.value = [];
        //     } else {
        //       // 尝试解析为JSON数组
        //       try {
        //         const contentData = JSON.parse(response.data.content);
        //         if (Array.isArray(contentData)) {
        //           cooperativeMedia.value = contentData.map((item, index) => ({
        //             id: item.id || index + 1,
        //             name:
        //               item.subtitle ||
        //               item.name ||
        //               item.title ||
        //               `合作媒体${index + 1}`,
        //             logo: item.backgroundImage || item.logo || item.image || "",
        //             description: item.content || item.description || "",
        //           }));
        //         } else {
        //           // 单条数据转换为数组
        //           cooperativeMedia.value = [
        //             {
        //               id: 1,
        //               name:
        //                 contentData.subtitle ||
        //                 response.data.title ||
        //                 "合作媒体",
        //               logo:
        //                 contentData.backgroundImage ||
        //                 response.data.imageUrl ||
        //                 "",
        //               description:
        //                 contentData.content || response.data.content || "",
        //             },
        //           ];
        //         }
        //       } catch (e) {
        //         // 纯文本内容
        //         cooperativeMedia.value = [
        //           {
        //             id: 1,
        //             name: response.data.title || "合作媒体",
        //             logo: response.data.imageUrl || "",
        //             description: response.data.content,
        //           },
        //         ];
        //       }
        //     }
        //   } else {
        //     cooperativeMedia.value = getDefaultCooperativeMedia();
        //   }
        // } else {
        //   // 使用默认数据
        //   pageData.value = getDefaultPageData();
        //   cooperativeMedia.value = getDefaultCooperativeMedia();
        // }
      } catch (error) {
        console.error("加载合作媒体数据失败:", error);
        pageData.value = getDefaultPageData();
        cooperativeMedia.value = getDefaultCooperativeMedia();
      }
    };

    const loadBanner = async () => {
      try {
        const res = await subpageApi.getContentByType("carousel_media");
        if (
          res &&
          (res.code === "200" || res.code === 200) &&
          Array.isArray(res.data) &&
          res.data.length > 0
        ) {
          const firstActive =
            res.data.find((item) => item.status === "active") || res.data[0];
          bannerImage.value = firstActive.imageUrl || firstActive.image || "";
        }
      } catch (e) {
        bannerImage.value = "";
      }
    };

    onMounted(() => {
      loadCooperativeMedia();
      loadBanner();
    });

    // 默认页面数据
    const getDefaultPageData = () => {
      return {
        title: "合作媒体",
        description: "与展会合作的权威媒体伙伴",
      };
    };

    // 默认合作媒体数据
    const getDefaultCooperativeMedia = () => {
      return [
        {
          id: 1,
          name: "科技日报",
          logo: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=200&h=100&fit=crop",
          description: "国家级科技类报纸",
        },
        {
          id: 2,
          name: "中国工业报",
          logo: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=200&h=100&fit=crop",
          description: "专业工业媒体",
        },
        {
          id: 3,
          name: "人民网",
          logo: "https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=200&h=100&fit=crop",
          description: "主流网络媒体",
        },
        {
          id: 4,
          name: "新华网",
          logo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=100&fit=crop",
          description: "国家通讯社",
        },
      ];
    };

    const setActiveTab = (tabKey) => {
      if (!tabKey) return;
      activeTab.value = tabKey;
      if (tabKey !== "cooperative-media") {
        window.location.href = `/${tabKey}`;
      }
    };

    const goDetail = (item) => {
      console.log(item);
      if (item.linkUrl) {
        window.open(item.linkUrl, "_blank");
        return;
      }
      // ElMessage.warning("该合作媒体暂无链接");
    };

    return {
      activeTab,
      bannerImage,
      pageData,
      cooperativeMedia,
      setActiveTab,
      goDetail,
    };
  },
};
</script>

<style scoped>
.cooperative-media {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.content-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(
    0deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  border-radius: 2px;
}

.section-desc {
  margin: -8px 0 2rem;
  color: #666;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* 富文本内容样式 */
.rich-content {
  margin: 2rem auto;
  padding: 0 20px;
  line-height: 1.8;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 1000px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
  color: #320063;
  margin: 1.5rem 0 1rem 0;
}

.rich-content p {
  margin-bottom: 1rem;
  color: #666;
}

.rich-content img {
  max-width: 24%;
  width: auto;
  height: auto;
  border-radius: 8px;
  margin: 0.5rem 0.5%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: inline-block;
  object-fit: contain;
  overflow: hidden;
  vertical-align: top;
}

.rich-content ul,
.rich-content ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.rich-content li {
  margin-bottom: 0.5rem;
  color: #666;
}

.rich-content p {
  margin: 1rem 0;
  padding: 0;
}

.rich-content div {
  margin: 0.5rem 0;
}

.rich-content table {
  margin: 1rem 0;
  width: 100%;
}

/* 富文本响应式样式 */
@media (max-width: 768px) {
  .rich-content {
    font-size: 14px;
    padding: 0 15px;
    max-width: 100%;
  }

  .rich-content img {
    margin: 0.5rem 1%;
    border-radius: 6px;
    max-width: 48%;
    display: inline-block;
    vertical-align: top;
  }

  .rich-content p {
    margin: 0.8rem 0;
  }

  .rich-content div {
    margin: 0.3rem 0;
  }

  .rich-content ul,
  .rich-content ol {
    margin: 0.8rem 0;
    padding-left: 1.5rem;
  }

  .rich-content table {
    margin: 0.8rem 0;
    width: 100%;
  }

  .rich-content h1,
  .rich-content h2,
  .rich-content h3,
  .rich-content h4,
  .rich-content h5,
  .rich-content h6 {
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem 0;
  }
}

/* 多条数据纵向布局 */
.media-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.media-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.media-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 图片在上 */
.media-image-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.media-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f8f9fa;
}

/* 文本在下 */
.media-content {
  padding: 1.5rem;
}

.media-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  text-align: center;
}

.media-description {
  color: #666;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 1rem;
}

.media-description h1,
.media-description h2,
.media-description h3,
.media-description h4,
.media-description h5,
.media-description h6 {
  color: #320063;
  margin: 1rem 0 0.5rem 0;
  font-size: 1.1rem;
}

.media-description p {
  margin-bottom: 0.5rem;
}

.media-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.5rem 0;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .content-section {
    padding: 2rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .media-list {
    gap: 1.5rem;
  }

  .media-image-section {
    height: 150px;
  }

  .media-content {
    padding: 1rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}

/* 合作媒体Logo网格布局 - 参考首页参展企业轮播 */
.cooperative-media-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin-top: 20px;
  justify-items: center;
}

.media-logo-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.media-logo-container {
  width: 180px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 12px 15px;
  border: 1px solid #f0f0f0;
  position: relative;
}

.media-logo-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #320063;
}

.media-logo {
  max-width: 140px;
  max-height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
  flex: 1;
  display: flex;
  align-items: center;
}

.media-logo-container:hover .media-logo {
  transform: scale(1.05);
}

.media-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .cooperative-media-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }
}

@media (max-width: 992px) {
  .cooperative-media-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .media-logo-container {
    width: 160px;
    height: 90px;
  }

  .media-logo {
    max-width: 130px;
    max-height: 50px;
  }
}

@media (max-width: 768px) {
  .cooperative-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .media-logo-container {
    width: 140px;
    height: 85px;
  }

  .media-logo {
    max-width: 120px;
    max-height: 45px;
  }

  .media-name {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .cooperative-media-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .media-logo-container {
    width: 200px;
    height: 100px;
  }

  .media-logo {
    max-width: 170px;
    max-height: 60px;
  }
}
</style>
